<template>
  <div>
    <a-dropdown arrow>
      <HeadPortrait :id="userStore.userId ?? 0" :name="userStore.userName ?? ''" />
      <template #overlay>
        <a-menu :items="items" @click="handleClick"></a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup lang="ts">
import { HeadPortrait } from '@ykst/components';
import { iconifyToAntdvIconVNode } from '@ykst/shared';
import { type RouteNamedMap } from 'vue-router/auto/routes';
import { type MenuClickEventHandler } from 'ant-design-vue/es/menu/src/interface';
import { useAppFeedback } from '@/hooks/feedback/useAppFeedback';
import { useLoginStore, useUserStore } from '@/stores/login';

const { modal } = useAppFeedback();
const loginStore = useLoginStore();

const userStore = useUserStore();
interface UserDropdownMenuItems {
  label: string;
  key: string; //keyof RouteNamedMap | 'LogOut';
  icon: VNode;
}
const items = reactive<UserDropdownMenuItems[]>([
  {
    label: '用户信息',
    key: 'CompanyUserInfo',
    icon: iconifyToAntdvIconVNode('i-lucide-user-cog'),
  },

  {
    label: '登录日志',
    key: 'CompanyUserLoginLog',
    icon: iconifyToAntdvIconVNode('i-carbon-location'),
  },
  {
    label: '操作日志',
    key: 'CompanyUserOperationLog',
    icon: iconifyToAntdvIconVNode('i-carbon-property-relationship'),
  },
  {
    label: '退出登录',
    key: 'LogOut',
    icon: iconifyToAntdvIconVNode('i-ant-design-logout-outlined'),
  },
]);

const handleClick: MenuClickEventHandler = e => {
  if (e.key === 'LogOut') {
    showLogOutConfirm();
  } else {
    modal.warning({
      title: '还未开发',
    });
    // routerPushByRouteName(e.key as keyof RouteNamedMap);
  }
};

const showLogOutConfirm = () => {
  modal.confirm({
    title: '退出登录?',
    icon: iconifyToAntdvIconVNode('i-ant-design-exclamation-circle-outlined'),
    // centered: true,
    maskClosable: true,
    onOk() {
      loginStore.logout();
    },
  });
};
</script>

<style scoped></style>
